<template>
  <view class="member">
    <view class="list">
      <view class="list-item">
        开放成员注册：<switch :class="is_reg?'checked':''" :checked="is_reg" name="is_reg" @change="regChange" />
      </view>
    </view>
    <view v-if="is_reg">
      <button class="member__reg" @click="regMember">邀请成员</button>
      <button class="reg_member" :data-clipboard-text="cururl+'/#/pages/member/member_register?group_id='+group_id" @click="copyRegMember">点击复制给团体成员进行登记</button>
    </view>
    <button class="member__add" @click="addMember">新增成员</button>
    <view v-if="memberList.length" class="list">
      <view class="list-title" style="font-size: 18px;">人员列表：</view>
      <view class="list-item"
        v-for="(memberListVal, memberListIdx) in memberList"
        :key="memberListIdx"
      >
        <text class="member__name">{{memberListVal.person_name}}</text>
        <button size="mini" class="btn" @click="modifyMember(memberListVal._id)">修改</button>
        <button size="mini" class="btn" @click="delelteMember(memberListVal._id, memberListIdx)">删除</button>
      </view>
    </view>
    <view v-else class="empty">当前团队没有成员，请邀请成员或手动添加成员</view>
  </view>
</template>

<script>
import Clipboard from 'clipboard';

export default {
  data() {
    return {
      cururl: "",
      group_id: "",
      is_reg: false,

      isAddMember: false,
      memberList: []
    };
  },
  onShow() {
    uniCloud.callFunction({
      name: "ha_get_member",
      data: {
        type: 0,
        group_id: this.$route.query.group_id
      },
      success: ({ result }) => {
        if (result.code === -1) {
          this.isAddMember = true;
        } else if (result.code === -2) {
          uni.showModal({
            title: "提示",
            content: result.msg,
            success: function(res) {
              if (res.confirm) {
                uni.redirectTo({
                  url: "../index/index"
                });
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            }
          });
        } else {
          this.memberList = result.data;
        }
        // console.log(result);
      }
    });
  },
  created() {
    this.cururl = location.origin;
    this.group_id = this.$route.query.group_id;
    if (this.group_id) {
      this.getOneGroup();
      // console.log(this.is_reg);
    }
  },
  methods: {
    copyRegMember() {
      var clipboard = new Clipboard('.reg_member')
      clipboard.on('success', e => {
        uni.showToast({
          icon: 'none',
          title: '复制成功'
        });
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        uni.showToast({
          icon: 'none',
          title: '该浏览器不支持自动复制'
        });
        // 释放内存
        clipboard.destroy()
      })
    },
    addMember() {
      uni.navigateTo({
        url: `./create_member?group_id=${this.$route.query.group_id}`
      });
    },
    regMember() {
      uni.navigateTo({
        url: `./member_register?group_id=${this.$route.query.group_id}`
      });
    },
    modifyMember(memberId) {
      uni.navigateTo({
        url: `./modify_member?group_id=${this.$route.query.group_id}&member_id=${memberId}`
      });
    },
    delelteMember(memberId, memberIdx) {
      uni.showModal({ content: '确认删除吗？', success: (res) => { if (res.confirm) {
        // console.log(memberId);
        let token = uni.getStorageSync("token");

        if (token) {
          uniCloud.callFunction({
            name: "ha_del_member",
            data: {
              token,
              memberId
            },
            success: ({result}) => {
              // console.log(result);

              if ( result.status === 0 ) {
                uni.showToast({
                  title: `${result.msg || "删除成功！"}`,
                  duration: 1000
                });
                // location.reload();
                this.memberList.splice(memberIdx, 1);
              } else {
                uni.showModal({
                  content: `${result.msg || "网络异常，请稍后重试！"}`,
                  showCancel: false,
                  complete: function () {
                    uni.navigateTo({url: "/pages/user/user_login"});
                  }
                });
              }
            }
          });
        } else {
          uni.navigateTo({url: "/pages/user/user_login"});
        }
      }}});
    },
    getOneGroup() {
      uniCloud.callFunction({
        name: "ha_get_group",
        data: {
          type: 2,
          group_id: this.group_id
        },
        success: ({result}) => {
          // console.log(result);

          if(result.status === 0){
            const {
              is_reg
            } = result.data;
            this.is_reg = is_reg;
          }else{
            uni.showToast({
              icon: 'none',
              title: `${result.msg || "网络异常，请稍后重试！"}`,
              duration: 1000
            });
          }
        },
        fail() {
          uni.showToast({
            icon: 'none',
            title: '网络异常，请稍后重试！'
          });
        }
      });
    },
    regChange: function(e) {
      // console.log(e.target.value);
      this.is_reg = e.target.value;

      uniCloud.callFunction({
        name: "ha_update_group",
        data: {
          type: 2,
          group_id: this.group_id,
          is_reg: this.is_reg
        },
        success: ({result}) => {
          // console.log(result);

          if ( result.status === 0 ) {
            uni.showToast({
              title: `${result.msg || "更新成功！"}`,
              duration: 1000
            });
          } else {
            uni.showToast({
              icon: 'none',
              title: `${result.msg || "网络异常，请稍后重试！"}`,
              duration: 1000
            });
          }
        },
        fail() {
          uni.showToast({
            icon: 'none',
            title: '网络异常，请稍后重试！'
          });
        }
      });
    },
  }
};
</script>

<style lang="less">
uni-page-body {
  height: 100%;
}

.member {
  height: 100%;
  position: relative;
  padding: 10rpx;
}

.member__add .member__reg {
  background-color: #007aff;
  color: #fff;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
}

.empty {
  width: 100%;
  color: #666666;
  position: absolute;
  left: 50%;
  bottom: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.member__name {
  flex: 1;
}

  .list-item button {
    margin-left: 10rpx;
  }

  .list-item switch {
    margin-right: 10rpx;
  }

  // .member__list {
  //   display: flex;
  // }

</style>
